<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>上传专利文件</title>
    <meta name="keywords" content="知果汇"/>
    <meta name="description" content="知果汇"/>
    <link rel="SHORTCUT ICON" href="images/favicon.ico"/>
    <link rel="stylesheet" type="text/css" href="_CSS_/reset.css">
    <link rel="stylesheet" type="text/css" href="_CSS_/common.css">
    <link rel="stylesheet" type="text/css" href="_CSS_/store_center.css"/>
    <style type="text/css">
		html, body{min-width:580px;}
		
        .upload-box {
            padding: 20px;
            float: left;
        }

        .upload-title {
            display: inline-block;
            width: 45px;
            float: left;
            font-size: 14px;
            color: #333333;
        }

        .upload-list {
            float: left;
            display: inline-block;
            width: 525px;
        }

        .upload-btn {
            width: 98px;
            height: 98px;
            margin: 0;
            border: 1px solid #e5e5e5;
        }

        .upload-img {
            width: 98px;
            height: 98px;
            position: relative;
            float: left;
            margin-right: 33px;
            margin-bottom: 16px;
        }

        .upload-btn img {
            display: block;
            width: 98px;
            height: 98px;
        }

        .upload-btn input {
            position: absolute;
            top: 0;
            margin: 0;
            width: 98px;
            height: 98px;
            border: none;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer
        }

        .upload-img p {
            width: 98px;
            font-size: 10px;
            line-height: 16px;
            margin-top: -35px;
            text-align: center;
        }

        .img-info img {
            width: 98px;
            height: 98px;
        }

        .file-panel {
            position: absolute;
            display: none;
            width: 98px;
            height: 98px;
            top: 0;
            overflow: hidden;
            z-index: 300;
        }

        .del_cancel {
            width: 98px;
            height: 98px;
            background-color: rgba(0, 0, 0, 0.5);
        }

        

        .table-btn, .table-btn:hover, .table-btn:focus {
            color: #ffffff;
        }

        .point-out {
            color: #999999;
            font-size: 14px;
            padding-left: 45px;
            float: left;
            width: auto;
            margin-bottom: 15px;
        }

        .btn-box {
            width: 570px;
            text-align: center;
            margin-top: 20px;
        }

        .btn-box a {
            display: inline-block;
            height: 37px;
            line-height: 37px;
            margin: 5px 25px 0;
            padding: 0 30px;
            border: 1px solid #dedede;
            background-color: #fff;
            color: #333;
            border-radius: 5px;
            font-weight: 400;
            cursor: pointer;
            text-decoration: none;
            font-size: 14px;
        }

        .btn-box .btn-n1 {
            border-color: #3377c0;
            background-color: #3377c0;
            color: #ffffff;
        }
    </style>
</head>
<body>
<form action="" method="post">
    <div class="upload-box">
        <label class="upload-title">上传:</label>
        <div class="upload-list">
            <div class="upload-img">
                <div class="upload-btn">
                    <img src="/static/web/images/upload1.png">
                    <input type="file" name="upfile[]" id="file0" onchange="previewImage(this,0)"
                           accept="image/gif, image/jpeg, image/png">
                </div>
            </div>
            <div class="upload-img">
                <div class="upload-btn">
                    <img src="/static/web/images/upload1.png">
                    <input type="file" name="upfile[]" id="file1" onchange="previewImage(this,1)"
                           accept="image/gif, image/jpeg, image/png">
                </div>
            </div>
            <div class="upload-img">
                <div class="upload-btn">
                    <img src="/static/web/images/upload1.png">
                    <input type="file" name="upfile[]" id="file2" onchange="previewImage(this,2)"
                           accept="image/gif, image/jpeg, image/png">
                </div>
            </div>
            <div class="upload-img">
                <div class="upload-btn">
                    <img src="/static/web/images/upload1.png">
                    <input type="file" name="upfile[]" id="file3" onchange="previewImage(this,3)"
                           accept="image/gif, image/jpeg, image/png">
                </div>
            </div>
            <div class="upload-img">
                <div class="upload-btn">
                    <img src="/static/web/images/upload1.png">
                    <input type="file" name="upfile[]" id="file4" onchange="previewImage(this,4)"
                           accept="image/gif, image/jpeg, image/png">
                </div>
            </div>
        </div>
        <p class="point-out">注：仅支持JPG、PNG、JPEG、PDF格式，注意文件名不能有中文或空格，每张图片大小不超过5M</p>
        <div class="btn-box">
            <a class="btn-n1" href="#" title="确认" onclick="confirm()">确认</a>
            <a class="btn-n2" href="#" title="取消" onclick="cancel()">取消</a>
        </div>
    </div>
</form>
</body>
<script src="_JS_/jquery-1.8.3.min.js"></script>
<script src="_JS_/jquery.base64.js"></script>
<script src="_JS_/jquery.cookie.js"></script>
<script src="_JS_/common.js"></script>
<script src="_P_/layer/layer.js"></script>
<script type="text/javascript">
    var url = window.location.href;
    var id = url.split("#")[1];
    var king = url.split("#")[2];
    var all = url.split("#")[3];

    if (king == '') {
        king = 1;
    }

    if (all == '') {
        all = 0;
    }

    //文件上传
    function previewImage(obj, num) {
        var filepath = $(obj).val();
        fileObj = document.getElementById('file' + num);
        value = window.URL.createObjectURL(fileObj.files[0]);
        file_size = obj.files[0].size;
        size = file_size / 1024;
		var ldot = filepath.lastIndexOf(".");
		var types = filepath.substring(ldot + 1);
        if (size > 1024 * 5) {
            $('#file' + num).val("");
            layer.alert('上传图片不得大于5MB', {
                closeBtn: 0
            });
			return false;
        } else {
			if(types == 'pdf'){
				$(obj).parents(".upload-img").prepend('<div class="img-info"><img src="/static/web/images/pdf.png"/><div class="file-panel"><div class="del_cancel"><a class="btn table-btn" style="color: #ffffff;display: block;font-size: 18px;font-weight: bold;margin-left: 82px;height: 18px;line-height: 18px;text-decoration: none;" title="删除" href="javascript:;">×</a></div></div></div>');
			}else if(types == 'jpg' || types == 'jpeg' || types == 'png'){
				$(obj).parents(".upload-img").prepend('<div class="img-info"><img src="'+value+'"/><div class="file-panel"><div class="del_cancel"><a class="btn table-btn" style="color: #ffffff;display: block;font-size: 18px;font-weight: bold;margin-left: 82px;height: 18px;line-height: 18px;text-decoration: none;" title="删除" href="javascript:;">×</a></div></div></div>');
			}else{
				layer.alert('文件格式不正确',{
					closeBtn: 0
				});
				return false;
			}
            //$(obj).parents(".upload-img").prepend('<div class="img-info"><img src="' + value + '"/><div class="file-panel"><div class="del_cancel"><a class="btn table-btn" style="display:block;width:10px;height:10px;margin-left:85px;text-align:center;" title="删除" href="javascript:;"></a></div></div></div>');
            $(obj).parent(".upload-btn").hide();
            $(obj).parents(".upload-img").children('p').hide();

            $('.img-info').hover(function () {
                $(this).find(".file-panel").show();
            }, function () {
                $(this).find(".file-panel").hide();

            });
            $(".del_cancel a").on("click", function () {
                $('#file' + num).val("");
                $(this).parents('.upload-img').find(".upload-btn").show();
                $(this).parents('.upload-img').find(".upload-img p").show();
                $(this).parents(".img-info").remove();

            });
        }
    }

    //确认
    function confirm(obj) {
        //上传
        var formData = new FormData($('form')[0]);
        formData.append('id', id);
        $.ajax({
            type: "post",
            url: "/index.php/api/shop/upload_file",
            data: formData,
            dataType: 'json',
			beforeSend: function () {
                var index = layer.load(1, {
                    shade: [0.1, '#333333'] //0.1透明度的白色背景
                });
			},
            success: function (msg) {
                layer.closeAll();
                if (msg.code == 200) {
                    parent.postfile(1, king, all);
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                }
                if (msg.code == 1000) {
                    layer.msg(msg.message, {icon: 5});
                }
            },
            contentType: false, //必须false才会自动加上正确的Content-Type
            processData: false //必须false才会避开jQuery对 formdata 的默认处理
        });
    }

    //取消
    function cancel(obj) {
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }
</script>
</html>
